export class TemperatureChartConfig {
  static create(data: any[]) {
    return {
      backgroundColor: 'transparent',
      title: {
        text: '温度趋势',
        left: '10px',
        top: '10px',
        textStyle: {
          color: '#ff6b6b',
          fontSize: 16,
          fontWeight: 'bold'
        }
      },
      tooltip: {
        trigger: 'axis',
        backgroundColor: 'rgba(0, 0, 0, 0.8)',
        borderColor: 'rgba(255, 107, 107, 0.5)',
        textStyle: { color: '#fff' },
        formatter: function(params: any) {
          return `${params[0].name}<br/>温度: ${params[0].value.toFixed(1)}°C`
        }
      },
      grid: {
        top: '25%',
        left: '8%',
        right: '5%',
        bottom: '5%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        data: data.map(item => item.time),
        axisLine: { lineStyle: { color: 'rgba(0, 212, 255, 0.5)' } },
        axisLabel: { color: 'rgba(255, 255, 255, 0.7)', fontSize: 10, interval: 2 }
      },
      yAxis: {
        type: 'value',
        name: '温度(°C)',
        nameTextStyle: { color: 'rgba(255, 255, 255, 0.7)' },
        axisLine: { lineStyle: { color: 'rgba(0, 212, 255, 0.5)' } },
        splitLine: { lineStyle: { color: 'rgba(0, 212, 255, 0.1)' } },
        axisLabel: { color: 'rgba(255, 255, 255, 0.7)', fontSize: 10 }
      },
      series: [{
        data: data.map(item => item.value),
        type: 'line',
        smooth: true,
        symbol: 'emptyCircle',
        symbolSize: 4,
        itemStyle: { color: '#ff6b6b' },
        lineStyle: { color: '#ff6b6b', width: 2 }
      }]
    }
  }
}

export class HumidityGaugeConfig {
  static create(value: number) {
    return {
      backgroundColor: 'transparent',
      title: {
        text: '湿度监测',
        left: '10px',
        top: '10px',
        textStyle: {
          color: '#67e0e3',
          fontSize: 16,
          fontWeight: 'bold'
        }
      },
      tooltip: {
        trigger: 'item',
        backgroundColor: 'rgba(0, 0, 0, 0.8)',
        borderColor: 'rgba(103, 224, 227, 0.5)',
        textStyle: { color: '#fff' },
        formatter: function(params: any) {
          return `湿度: ${Math.round(params.value)}%`
        }
      },
      series: [{
        type: 'gauge',
        radius: '70%',
        center: ['50%', '65%'],
        startAngle: 180,
        endAngle: 0,
        min: 0,
        max: 100,
        splitNumber: 5,
        axisLine: {
          lineStyle: {
            width: 10,
            color: [[1, '#67e0e3']]
          }
        },
        pointer: {
          icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z',
          length: '60%',
          width: 8,
          offsetCenter: [0, '-60%'],
          itemStyle: { color: '#67e0e3' }
        },
        axisTick: {
          length: 8,
          lineStyle: { color: '#67e0e3', width: 2 }
        },
        splitLine: {
          length: 15,
          lineStyle: { color: '#67e0e3', width: 3 }
        },
        axisLabel: {
          color: '#67e0e3',
          fontSize: 12,
          distance: -40
        },
        title: {
          offsetCenter: [0, '-20%'],
          fontSize: 20,
          color: '#67e0e3'
        },
        detail: {
          fontSize: 16,
          offsetCenter: [0, '0%'],
          valueAnimation: true,
          formatter: function (value: number) {
            return Math.round(value) + '%'
          },
          color: '#67e0e3'
        },
        data: [{ value: value, name: '湿度' }]
      }]
    }
  }
}

export class EnvironmentRadarConfig {
  static create(data: number[]) {
    return {
      backgroundColor: 'transparent',
      title: {
        text: '环境质量评估',
        left: '10px',
        top: '10px',
        textStyle: {
          color: '#6c5ce7',
          fontSize: 16,
          fontWeight: 'bold'
        }
      },
      tooltip: {
        trigger: 'item',
        backgroundColor: 'rgba(0, 0, 0, 0.8)',
        borderColor: 'rgba(108, 92, 231, 0.5)',
        textStyle: { color: '#fff' },
        formatter: function(_params: any) {
          const indicators = ['空气质量', '温度', '湿度', '光照强度', '紫外线指数', '气压']
          const units = ['AQI', '°C', '%', 'lux', 'UV', 'hPa']
          const values = [
            Math.round(data[0]),
            Math.round(data[1] / 4),
            Math.round(data[2]),
            Math.round(data[3] * 20),
            Math.round(data[4] / 10),
            Math.round(data[5] + 950)
          ]
          let result = '环境质量指标:<br/>'
          indicators.forEach((name, index) => {
            result += `${name}: ${values[index]}${units[index]}<br/>`
          })
          return result
        }
      },
      radar: {
        indicator: [
          { name: '空气质量', max: 100 },
          { name: '温度', max: 150 },
          { name: '湿度', max: 100 },
          { name: '光照', max: 100 },
          { name: '紫外线', max: 100 },
          { name: '气压', max: 100 }
        ],
        center: ['50%', '60%'],
        radius: '60%',
        axisName: {
          color: '#00d4ff',
          fontSize: 12
        },
        splitLine: {
          lineStyle: {
            color: 'rgba(0, 212, 255, 0.2)'
          }
        },
        axisLine: {
          lineStyle: {
            color: 'rgba(0, 212, 255, 0.5)'
          }
        }
      },
      series: [{
        type: 'radar',
        data: [{
          value: data,
          name: '环境指标',
          symbol: 'circle',
          symbolSize: 4,
          itemStyle: { color: '#6c5ce7' },
          lineStyle: { color: '#6c5ce7', width: 2 },
          areaStyle: { color: 'rgba(108, 92, 231, 0.3)' }
        }]
      }]
    }
  }
}

export class EnergyBarConfig {
  static create(categories: string[], buildings: string[], data: number[][]) {
    return {
      backgroundColor: 'transparent',
      title: {
        text: '能耗统计',
        left: '10px',
        top: '10px',
        textStyle: {
          color: '#ffb64d',
          fontSize: 16,
          fontWeight: 'bold'
        }
      },
      tooltip: {
        trigger: 'axis',
        backgroundColor: 'rgba(0, 0, 0, 0.8)',
        borderColor: 'rgba(0, 212, 255, 0.5)',
        textStyle: { color: '#fff' },
        formatter: function(params: any) {
          let result = `${params[0].name}<br/>`
          params.forEach((item: any) => {
            result += `${item.seriesName}: ${item.value}kWh<br/>`
          })
          return result
        }
      },
      legend: {
        data: buildings,
        textStyle: { color: '#00d4ff', fontSize: 10 },
        top: '20%'
      },
      grid: {
        top: '35%',
        left: '8%',
        right: '8%',
        bottom: '5%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        data: categories,
        axisLine: { lineStyle: { color: 'rgba(0, 212, 255, 0.5)' } },
        axisLabel: { color: 'rgba(255, 255, 255, 0.7)', fontSize: 10 }
      },
      yAxis: {
        type: 'value',
        name: '用量(kWh)',
        nameTextStyle: { color: 'rgba(255, 255, 255, 0.7)' },
        axisLine: { lineStyle: { color: 'rgba(0, 212, 255, 0.5)' } },
        splitLine: { lineStyle: { color: 'rgba(0, 212, 255, 0.1)' } },
        axisLabel: { color: 'rgba(255, 255, 255, 0.7)', fontSize: 10 }
      },
      series: buildings.map((building, index) => ({
        name: building,
        type: 'bar',
        data: data.map(row => row[index]), // 修正数据映射：每个楼层的数据
        itemStyle: {
          color: ['#ff6b6b', '#67e0e3', '#ffd93d'][index % 3]
        },
        barWidth: '20%'
      }))
    }
  }
}
